<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>消息通知系统 - 列表</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css">
  <link rel="stylesheet" href="css/list.css">
</head>
<body>
<div id="app">
  <div class="app-container">
    <div class="page-header">
      <h1 class="page-title">消息通知管理</h1>
    </div>

    <div class="filter-container">
      <el-form :inline="true" :model="filterForm" ref="filterForm" size="small">
        <el-form-item label="标题">
          <el-input v-model="filterForm.title" placeholder="请输入标题关键字" clearable></el-input>
        </el-form-item>
        <el-form-item label="通知人群">
          <el-select v-model="filterForm.target_type" placeholder="请选择" clearable>
            <el-option label="所有用户" :value="1"></el-option>
            <el-option label="指定角色" :value="2"></el-option>
            <el-option label="指定用户" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filterForm.status" placeholder="请选择" clearable>
            <el-option label="草稿" :value="1"></el-option>
            <el-option label="已发布" :value="2"></el-option>
            <el-option label="未生效" :value="3"></el-option>
            <el-option label="生效中" :value="4"></el-option>
            <el-option label="已过期" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="filterForm.priority" placeholder="请选择" clearable>
            <el-option label="紧急" :value="1"></el-option>
            <el-option label="高" :value="2"></el-option>
            <el-option label="中" :value="3"></el-option>
            <el-option label="低" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生效时间">
          <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              :clearable="true"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <div style="margin-top: 20px;">
        <el-button type="primary" @click="handleAdd">新增消息</el-button>
      </div>
    </div>

    <div class="table-container">
      <el-table
          v-loading="loading"
          :data="messageList"
          border
          style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="title" label="标题" min-width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="target_type_text" label="通知人群" width="100"></el-table-column>
        <el-table-column label="通知类型" width="150">
          <template slot-scope="scope">
            <el-tag
                v-for="type in scope.row.notification_type"
                :key="type"
                size="mini"
                class="notification-type-tag"
            >
              {{ formatNotificationType(type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag
                :class="'el-tag--' + getStatusClass(scope.row.status)"
                size="mini"
            >{{ scope.row.status_text }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="优先级" width="80">
          <template slot-scope="scope">
            <el-tag
                :class="'el-tag--' + getPriorityClass(scope.row.priority)"
                size="mini"
            >{{ scope.row.priority_text }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="生效时间" width="280">
          <template slot-scope="scope">
            {{ formatTimestamp(scope.row.effective_start_at) }} 至 {{ formatTimestamp(scope.row.effective_end_at) }}
          </template>
        </el-table-column>
        <el-table-column label="发布时间" width="160">
          <template slot-scope="scope">
            {{ formatTimestamp(scope.row.published_at) }}
          </template>
        </el-table-column>
        <el-table-column label="阅读情况" width="120">
          <template slot-scope="scope">
            {{ scope.row.read_count }}/{{ scope.row.total_user_count }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button
                v-if="scope.row.status === 1"
                type="success"
                size="mini"
                class="operation-btn"
                @click="handlePublish(scope.row.id)"
            >发布</el-button>
            <el-button
                type="primary"
                size="mini"
                class="operation-btn"
                @click="handleEdit(scope.row.id)"
            >编辑</el-button>
            <el-button
                type="danger"
                size="mini"
                class="operation-btn"
                @click="handleDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagination.page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.13/index.min.js"></script>
<script src="js/list.js"></script>
</body>
</html>
